<template>
  <div>
    <el-page-header @back="router.push('/')" class="pageHeader">
      <template #content>
        <span class="text-large font-600 mr-3"> 练习模式 </span>
      </template>
    </el-page-header>
    <main class="content">
      <h2>{{ choiseData[i].title }}</h2>
      <br />
      <el-radio-group v-model="radio" class="select" :disabled="visibleResult">
        <el-radio label="a" size="large" class="item">A. {{ choiseData[i].a }}</el-radio>
        <el-radio label="b" size="large" class="item">B. {{ choiseData[i].b }}</el-radio>
        <el-radio label="c" size="large" class="item">C. {{ choiseData[i].c }}</el-radio>
        <el-radio label="d" size="large" class="item">D. {{ choiseData[i].d }}</el-radio>
      </el-radio-group>
    </main>

    <div class="footer">
      <div class="result" v-if="visibleResult">
        <h3 class="yes" v-if="radio === choiseData[i].yes">正确</h3>
        <h3 class="error" v-else>
          {{ `错误。正确答案：${choiseData[i].yes}` }}
        </h3>
      </div>
      <div class="footer-btn">
        <el-button @click="visibleResult = true" type="primary">检验</el-button>
        <el-button @click="next">下一题</el-button>
        <el-button @click="addError" :disabled="errorData.includes(choiseData[i])"
          :type="errorData.includes(choiseData[i]) ? 'success' : 'warning'" plain>{{
            errorData.includes(choiseData[i]) ? "已加入错题集" : "加入错题集"
          }}</el-button>
        <el-button @click="openList">题目列表</el-button>
      </div>
    </div>


    <el-drawer v-model="drawer" title="题目列表" :size="size" @opened="openedDrawer">
      <ul class="list" ref="listRef">
        <li @click="changeList(index)" v-for="(item, index) in choiseData"
          :class="['list-title', index === i ? 'active' : '']" :key="item.title">
          <b>{{
            index + 1
          }}.</b> {{
  item.title
}}
        </li>
      </ul>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
// import choiseData from "@/mock/choise";
import { useRouter } from "vue-router";
import axios from 'axios'

const router = useRouter();

const listRef: any = ref(null)

const i = ref(0);
const visibleResult = ref(false);
const radio = ref("a");
const tooData: any = ref([]);

const errorData: any = ref([]);

const drawer = ref(false)

const size = window.innerWidth > 800 ? '50%' : '70%'


const choiseData: any = ref([{
  title: '',
  a: '',
  b: '',
  c: '',
  d: '',
  yes: '',
}])

const refresh = () => {
  const url = 'https://hyl999.co:7777'
  axios.get(url + '/answer/query').then(res => {
    choiseData.value = res.data.data

  })
}

onMounted(() => {
  refresh()
})

onMounted(() => {
  let data: any = localStorage.getItem("errorData");
  if (data) {
    data = JSON.parse(data);
    errorData.value = data;
  }

  next();

});

const next = () => {
  if (tooData.value.length >= choiseData.value.length) {
    return ElMessage({
      message: "没有更多题了",
      type: "warning",
    });
  }
  visibleResult.value = false;
  radio.value = "a";
  const num = Math.floor(Math.random() * choiseData.value.length);
  if (!tooData.value.includes(choiseData.value[num])) {
    i.value = num;
    tooData.value.push(choiseData.value[num]);
  } else {
    next();
  }
};

const addError = () => {
  errorData.value.push(choiseData.value[i.value]);

  localStorage.setItem("errorData", JSON.stringify(errorData.value));
};

const openList = () => {
  drawer.value = true
}

const changeList = (index: any) => {
  i.value = index
}

const openedDrawer = () => {
  const goElement = document.querySelector(".active");
  goElement?.scrollIntoView({ behavior: "smooth", block: "center" });

  console.log(window.innerWidth);

}

</script>

<style lang="less">
li {
  list-style: none;
}

ul {
  .list-title {
    padding: 10px 0;

    b {
      font-weight: bold;
    }

    &:hover {
      color: red;
      cursor: pointer;
    }
  }

  .active {
    color: red;

  }
}


.item {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.result {
  margin: 10px 0;

  .yes {
    font-weight: bold;
    color: rgb(31, 146, 108);
  }

  .error {
    font-weight: bold;
    color: rgb(224, 25, 18);
  }
}

.pageHeader {
  padding: 15px;
}

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  padding: 20px;
  text-align: center;
}

.footer {
  width: 100%;
  margin-top: 20px;

  padding: 10px;
  padding-bottom: 30px;
  position: fixed;
  bottom: 0;
  right: 0;

  text-align: center;

  .footerbtn {
    display: flex;
  }
}
</style>
